<template>
	<view class="content">
		<view class="shop-box">
			<view class="shop-cont flexWrapNo">
				<image :src="goodsInfo.image" class="shop-img"></image>
				<view class="shop-info-box flexWarpColumn">
					<view class="info-box">
						<view>{{goodsInfo.title||'--'}}</view>
						<view class="specs-box flexWrapNo" v-if="goodsInfo.spec&&goodsInfo.spec.length>0">
							<text v-for="(val,i) in goodsInfo.spec" :key="i">
								{{val.spec}}:{{val.specValue}},
							</text>
							x{{detailsInfo.nums}}
						</view>
						<view class="specs-box" v-else>
							默认,x{{detailsInfo.nums}}
						</view>
					</view>
				</view>
				<view class="ststus-box flexWarpColumn">
					<view class="status yellow" v-if="goodsInfo.salestate==1">待商家处理</view>
					<view class="status yellow" v-if="goodsInfo.salestate==2">退款中</view>
					<view class="status yellow" v-if="goodsInfo.salestate==3">待买家寄回</view>
					<view class="status yellow" v-if="goodsInfo.salestate==4">已退款</view>
					<view class="status yellow" v-if="goodsInfo.salestate==5">已退款</view>
					<view class="status yellow" v-if="goodsInfo.salestate==6">商家申请协商</view>
					<view class="status yellow" v-if="goodsInfo.salestate==7">待商家收货</view>
					<view class="status yellow" v-if="goodsInfo.salestate==8">退款关闭,买家已撤销申请</view>
					<view class="status yellow" v-if="goodsInfo.salestate==4||goodsInfo.salestate==5">
						￥{{detailsInfo.refund}}</view>
				</view>
			</view>
			<view class="order-box">
				<view class="order-info flexWrap">
					<view class="order-info-title">售后类型</view>
					<view class="value">{{detailsInfo.type==1?'仅退款':'退货退款'}}</view>
				</view>
				<view class="order-info flexWrap">
					<view class="order-info-title">退款原因</view>
					<view>{{detailsInfo.reason}}</view>
				</view>
				<view class="order-info flexWrap">
					<view class="order-info-title">退款金额</view>
					<view>￥{{detailsInfo.refund}}</view>
				</view>
				<view class="order-info flexWrap">
					<view class="order-info-title">退款说明</view>
					<view>{{detailsInfo.refundInstructions}}</view>
				</view>
				<view class="certificate-box">
					<view class="label">凭证</view>
					<view class="upload-box">
						<view class="file-item" v-for="(item,index) in photos" :key="index">
							<block v-if="isVideoOrImage(item.url) == 'video'">
								<video :src="item.url" object-fit="cover" class="img"></video>
							</block>
							<block v-else>
								<image :src="item.url" class="img" @tap.stop="previewImage(item.url)" mode="aspectFill">
								</image>
							</block>
						</view>
					</view>
				</view>
				<view class="order-info flexWrap">
					<view class="order-info-title">申请时间</view>
					<view>{{detailsInfo.createtime}}</view>
				</view>
				<view class="order-info flexWrap">
					<view class="order-info-title">退款编号</view>
					<view>{{detailsInfo.refundNo}} <text class="copy" @tap="copyText(detailsInfo.refundNo)">复制</text>
					</view>
				</view>
				<view class="order-info flexWrap" @tap="consultationsRecordFlag=true">
					<view class="order-info-title">协商记录</view>
					<view>点击查看 <text class="icon-more"></text></view>
				</view>
				<view class="order-info flexWrap" @tap="checkLogistics" v-if="detailsInfo.expressno">
					<view class="order-info-title">查看物流</view>
					<view><text class="icon-more"></text></view>
				</view>
				<block
					v-if="goodsInfo.salestate==1||(goodsInfo.salestate==7&&detailsInfo.expressno)||(goodsInfo.salestate==3&&detailsInfo.expressno)">
					<view class="operate-item">
						<view class="operate-title" v-if="detailsInfo.type==1">是否同意退款</view>
						<view class="operate-title" v-if="detailsInfo.type==2">
							<!-- <block v-if="detailsInfo.expressno">
								{{logisticsInfo.deliverystatus==3?'已收到货，是否同意退款申请':'是否同意退款申请'}}
							</block>
							<block v-else>
								是否同意退货
							</block> -->
							{{detailsInfo.expressno?'是否同意退款申请':'是否同意退货'}}
						</view>
						<radio-group class="flexWrapNo radio-group" @change="grantTypeChange">
							<label>
								<radio :value="1" :checked="isRefund==1" style="transform: scale(0.7);"
									color="#26BCFD" />同意
							</label>
							<label>
								<radio :value="2" :checked="isRefund==2" style="transform: scale(0.7);"
									color="#26BCFD" />
								不同意
							</label>
						</radio-group>
					</view>
					<block v-if="detailsInfo.type==1">
						<view class="operate-item flexWrapNo" v-if="isRefund==1">
							<view class="operate-title">退款金额</view>
							<view class="price-box flexWarpColumn">
								<view>￥{{detailsInfo.refund}}</view>
								<view class="max">实付金额￥{{detailsInfo.realprice}}</view>
							</view>
						</view>
					</block>
					<block v-if="detailsInfo.type==2&&detailsInfo.expressno">
						<view class="operate-item flexWrapNo" v-if="isRefund==1">
							<view class="operate-title">退款金额</view>
							<view class="price-box flexWarpColumn">
								<view>￥{{detailsInfo.refund}}</view>
								<view class="max">实付金额￥{{detailsInfo.realprice}}</view>
							</view>
						</view>
					</block>
					<view class="operate-item">
						<view class="operate-title">回复说明</view>
						<textarea placeholder="请填写" placeholder-class="placeholder" v-model="mark"></textarea>
					</view>
				</block>
			</view>
		</view>
		<view class="bottom-box flexWrap"
			v-if="goodsInfo.salestate==1||(goodsInfo.salestate==7&&detailsInfo.expressno)||(goodsInfo.salestate==3&&detailsInfo.expressno)">
			<view class="define-btn" @tap="audits()">提交保存</view>
		</view>
		<view class="common-bottom-pupup consultationsRecord-popup" v-if="consultationsRecordFlag">
			<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
			<view class="title">协商记录</view>
			<view class="record-list" v-if="recordList.length>0">
				<view class="record-item" v-for="(val,k) in recordList" :key="k">
					<view class="time">{{val.createTime||'--'}}</view>
					<view class="progress" v-if="val.type==1">买家发起了售后申请</view>
					<view class="progress" v-else-if="val.type==2">买家发起了修改售后申请</view>
					<view class="progress" v-else-if="val.type==3">商家申请协商</view>
					<view class="progress" v-else-if="val.type==4">商家同意售后</view>
					<view class="progress" v-else-if="val.type==5">买家已退货</view>
					<!-- <view class="progress" v-else-if="val.type==6">商家同意退款</view> -->
					<view class="progress" v-else-if="val.type==7">退款关闭,买家已撤销申请</view>
					<view class="remarks" v-if="val.remarks">
						商家回复：<text>{{val.remarks}}</text>
					</view>
				</view>
			</view>
			<view class="quesheng" v-else>暂无协商记录</view>
		</view>
		<view class="common-bottom-pupup logistics-popup" v-if="logisticsFlag">
			<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
			<view class="title">物流明细</view>
			<view class="express-delivery flexWrapNo" v-if="logisticsInfo">
				<text class="name">{{logisticsInfo.expName}}</text>
				<text>{{logisticsInfo.number}}</text>
				<text class="copy" @tap="copyText(logisticsInfo.number)">复制</text>
			</view>

			<view class="deliver-box" v-if="logisticsInfo">
				<view class="deliver-item" v-for="(item,index) in logisticsSite" :key="index">
					<view class="flexWrapNo">
						<block v-if="index==0">
							<text class="status" v-if="logisticsInfo.deliverystatus==0">快递收件（揽件）</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==1">在途中</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==2">正在派件</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==3">已签收</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==4">派送失败</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==5">疑难件</text>
							<text class="status" v-if="logisticsInfo.deliverystatus==6">退件签收</text>
						</block>
						<text class="time">{{item.time}}</text>
					</view>
					<view class="desc">{{item.status}}</view>
				</view>
			</view>
			<view class="quesheng" v-if="!logisticsInfo">暂无物流信息</view>
			<view class="sure-btn" @tap="closePopup()">确定</view>
		</view>
		<view class="mask-wrap" v-if="consultationsRecordFlag||logisticsFlag"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				aftersalesId: '',
				detailsInfo: {},
				goodsInfo: {},
				photos: [],
				withdrawApplyFlag: false, // 撤销申请
				consultationsRecordFlag: false, // 协商记录
				recordList: [], // 协商记录列表
				courierNumberFlag: false, // 填写单号
				expressno: '',
				expressname: '', // 物流公司
				companyFlag: false,
				logisticsCompanyList: [],

				logisticsFlag: false,
				logisticsInfo: {},
				logisticsSite: [],

				overtimeFlag: false,
				isRefund: 1,
				mark: ""
			};
		},
		onLoad(ops) {
			this.aftersalesId = ops.aftersalesId
			this.getdetailsInfo()
			this.getConsultationsRecord()
		},
		methods: {
			// 是否同意
			grantTypeChange(e) {
				this.isRefund = e.detail.value
			},
			closePopup() {
				this.withdrawApplyFlag = false
				this.consultationsRecordFlag = false
				this.courierNumberFlag = false
				this.logisticsFlag = false
				this.overtimeFlag = false
			},
			// 判断是视频还是图片
			isVideoOrImage(file) {
				let videoRegex = /(\mp4|\avi|\mkv)$/i
				let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
				if (imgRegex.test(file)) {
					return 'image'
				} else if (videoRegex.test(file)) {
					return 'video'
				} else {
					return 'unknown'
				}
			},
			getdetailsInfo() {
				this.$request.post(this.$api.aftersalesInfo, {
					aftersalesId: this.aftersalesId,
					storeId: uni.getStorageSync('store_id'),
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.detailsInfo = data
						this.detailsInfo.createtime = this.$tools.formatDate(this.detailsInfo.createtime, 1)
						this.photos = data.photos

						this.getBugDeatils()
						if (this.detailsInfo.expressno) {
							this.getLogisticsInfo()
						}
					}
				})
			},
			// 获取购买详情
			getBugDeatils() {
				this.$request.get(this.$api.orderBuyDetails, {
					orderId: this.detailsInfo.orderId,
					orderGoodsId: this.detailsInfo.orderGoodsId
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.goodsInfo = data
					}
				})
			},
			copyText(text) {
				let that = this
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
					}
				});
			},
			audits() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'audits', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 3000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => {
						this.$request.post(this.$api.audits, {
							aftersalesId: this.aftersalesId,
							storeId: uni.getStorageSync('store_id'),
							isRefund: this.isRefund,
							mark: this.mark
						}, {
							isJava: true
						}).then(res => {
							if (res.code == 200) {
								let {
									data = {}
								} = res;
								this.getConsultationsRecord();
								this.getdetailsInfo();
								this.$tools.showToast('操作成功')
							}
						})
					}
				})
			},
			// 协商记录
			getConsultationsRecord() {
				this.$request.post(this.$api.consultationsRecord, {
					aftersalesId: this.aftersalesId
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data
						} = res
						this.recordList = data
					}
				})
			},
			// 查看物流
			checkLogistics() {
				// this.getLogisticsInfo()
				this.logisticsFlag = true
			},
			// 查询快递信息
			getLogisticsInfo() {
				this.$request.post(this.$api.logisticsInfo, {
					no: this.detailsInfo.expressno,
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data
						} = res
						this.logisticsInfo = data
						this.logisticsSite = data.list
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 44upx 36upx;
		padding-bottom: 200upx;
	}

	.shop-box {
		background: #1D1C5C;
		border-radius: 16rpx;
		padding-bottom: 10rpx;

		.shop-cont {
			padding: 28upx;
			align-items: flex-start;
			position: relative;
			.shop-img {
				width: 168rpx;
				height: 168rpx;
				border-radius: 6rpx;
				flex: none;
				margin-right: 20upx;
			}

			.shop-info-box {
				font-size: 28rpx;
				color: #FFFFFF;
				height: 168rpx;
				justify-content: space-between;
				flex: 1;
				
				.info-box {
					.specs-box {
						font-size: 24rpx;
						color: rgba(255, 255, 255, 0.8);
						margin-top: 8upx;
						gap: 14rpx;
					}
				}

				.price {
					font-weight: bold;
					font-size: 24rpx;

					.symbol {
						font-size: 20rpx;
						margin-right: 6rpx;
						font-weight: unset;
					}
				}
			}

			.ststus-box {
				align-items: flex-end;
				gap: 8rpx;
				position: absolute;
				right: 10rpx;
				width: 200upx;
				.status {
					font-weight: 500;
					font-size: 26rpx;
					color: rgba(255, 255, 255, 0.5);
					text-align: right;
				}

				.yellow {
					color: #FFAA00;
				}
			}
		}

		.total-box {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #8786A8;
			line-height: 100upx;
			text-align: right;
			padding: 0 28upx;

			.price {
				color: #FFFFFF;
				margin-left: 24upx;
			}
		}
	}
	.certificate-box {
		margin: 20rpx 0;
	
		.label {
			color: #FFFFFF;
			font-weight: 500;
			font-size: 24rpx;
		}
	
		.upload-box {
			margin-top: 14rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
	
			.file-item {
				width: 132rpx;
				height: 132rpx;
				position: relative;
	
				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.order-box {
		padding: 0 28upx;

		.order-info {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.5);
			margin-bottom: 14upx;

			.order-info-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #E2E2EB;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.copy {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #26BCFD;
				margin-left: 10upx;
			}

			.icon-more {
				width: 14rpx;
				height: 14rpx;
				border-bottom: 4rpx solid rgba(255, 255, 255, 0.5);
				border-left: 4rpx solid rgba(255, 255, 255, 0.5);
			}
		}

		.operate-item {
			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;
			padding: 20upx 0;

			.operate-title {
				margin-bottom: 12upx;
			}

			.price-box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-left: 24upx;

				.max {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: rgba(255, 255, 255, 0.5);
					line-height: 23rpx;
				}
			}

			.radio-group {
				gap: 40rpx;
			}

			.placeholder {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.5);
				line-height: 28rpx;
			}

			textarea {
				width: 100%;
				height: 150rpx;
			}
		}
	}

	.bottom-box {
		height: 120rpx;
		background: #1D1C5C;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding: 0 66upx;
		justify-content: center;

		.btn {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			width: 282rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #26BCFD;
			text-align: center;
			margin-right: 30upx;
		}

		.define-btn {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			width: 686rpx;
			height: 80rpx;
			background: #26BCFD;
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			text-align: center;
		}
	}

	.common-bottom-pupup {
		width: 100%;
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 40rpx;
		padding-bottom: 62rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;

		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.close-btn {
			width: 52upx;
			height: 52upx;
			position: absolute;
			top: 28upx;
			right: 28upx;
		}

		.sure-btn {
			height: 96rpx;
			background: linear-gradient(90deg, #598FFF 0%, #2662DE 100%);
			border-radius: 48rpx;
			line-height: 96rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 40rpx;
		}

		.quesheng {
			font-size: 30upx;
			line-height: 34upx;
			color: #FFFFFF;
			margin: 180upx auto;
			width: 300rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			border-radius: 88rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.1);
		}
	}

	.consultationsRecord-popup {
		min-height: 600rpx;

		.record-list {
			max-height: 900rpx;
			overflow-y: auto;

			.record-item {
				margin-top: 26rpx;

				.time {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.progress {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				.remarks {
					margin-top: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;

					text {
						color: rgba(255, 255, 255, 0.5);
					}
				}
			}
		}
	}

	.logistics-popup {
		.express-delivery {
			margin-top: 28rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 27rpx 0;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);

			.name {
				font-size: 32rpx;
				margin-right: 20rpx;
			}

			.copy {
				color: #598FFF;
				margin-left: 10rpx;
			}
		}

		.deliver-box {
			max-height: 800rpx;
			overflow-y: auto;

			.deliver-item {
				margin-top: 30rpx;

				.status {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-right: 14rpx;
				}

				.time {
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
				}

				.desc {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.5);
					letter-spacing: 2rpx;
				}
			}
		}


	}
</style>